<template>
  <a-modal title-align="start" :title="props.type == 'add' ? '新增结算规则' : '编辑结算规则'" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="800">
    <a-form auto-label-width ref="formRef" size="medium" :model="form">
      <div class="title-bar">基础信息</div>
      <a-form-item field="name" label="规则名称" :rules="rules.name">
        <a-input v-model="form.name" placeholder="请输入规则名称" allow-clear />
      </a-form-item>
      <a-form-item field="calMehtod" label="计算方式" :rules="rules.calMehtod">
        <a-radio-group v-model="form.calMehtod" :disabled="props.calMehtod == 'edit'">
          <a-radio value="1">固定价格</a-radio>
          <a-radio value="2">按服务费比例</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="taskType" label="任务类型" :rules="rules.taskType">
        <a-select @change="changeType" palceholder="请选择任务类型" v-model="form.taskType">
          <a-option v-for="(item, index) of taskTypeAndNode" :key="index" :value="item.value" :label="item.label"></a-option>
        </a-select>
      </a-form-item>
      <div class="title-bar">设置节点</div>
      <a-table :data="selTaskType.node" :pagination="false" class="table-two-line">
        <template #columns>
          <a-table-column title="作业节点" #cell="{ record }" :width="120">
            <a-checkbox :disabled="record.groupLeaderContentType" v-model="record.isSel">{{ nodeTextMap[record.contentType] }}</a-checkbox>
          </a-table-column>
          <a-table-column title="单价金额">
            <template #title>
              <div class="required">单价金额</div>
            </template>
            <template #cell="{ record }">
              <a-input style="width: 200px" v-model="record.price" allow-clear placeholder="请输入">
                <template #suffix> {{ form.calMehtod == '1' ? '元' : '%' }} </template>
              </a-input>
            </template>
          </a-table-column>
          <a-table-column>
            <template #title>
              <div :class="[form.calMehtod == '2' ? 'required' : '']">{{ form.calMehtod == '1' ? '打包金额' : '打包价' }}</div>
            </template>
            <template #cell="{ record }">
              <a-input style="width: 200px" v-model="record.mulPrice" :disabled="record.isPick" allow-clear placeholder="请输入">
                <template #suffix>{{ form.calMehtod == '1' ? '元' : '%' }} </template>
              </a-input>
            </template>
          </a-table-column>
          <a-table-column title="操作" #cell="{ record }" :width="80">
            <a-space>
              <a-button type="text" @click="showSetGroupRuleModal(record)">打包</a-button>
              <a-button type="text">编辑</a-button>
              <a-button type="text">取消</a-button>
            </a-space>
          </a-table-column>
        </template>
      </a-table>
    </a-form>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
  <setGroupRule v-if="showSetGroupRuleVisible" v-model="showSetGroupRuleVisible" :nodeItem="nodeItem" @save="saveSetGroupRule" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed, onMounted } from 'vue'
  import { taskTypeAndNode, nodeTextMap } from '../../taskMap'
  import setGroupRule from './setGroupRule.vue'
  import _, { constant } from 'lodash-es'
  const props = defineProps(['modelValue', 'type', 'info'])
  const emits = defineEmits(['save', 'update:modelValue'])
  const formRef = ref()
  const showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  const selTaskType = ref<any>({})
  const nodeItem = ref<any>({})
  const showSetGroupRuleVisible = ref(false)

  const form = ref({
    name: '',
    calMehtod: '1',
    taskType: 'NEW_PRODUCT_PICTURE',
  })

  const rules = ref({
    name: [{ required: true, message: '请输入仓库名称' }],
    calMehtod: [{ required: true, message: '请选择计算方式' }],
    taskType: [{ required: true, message: '请选择任务类型' }],
  })

  const submit = async () => {
    const valid = await formRef.value.validate()
    if (valid) return
    showvisible.value = false
  }

  const showSetGroupRuleModal = (data: any) => {
    let obj = _.cloneDeep(data)
    let arr = selTaskType.value.node.filter((item: any) => item.contentType != data.contentType && !item.groupLeaderContentType)
    obj.subNodeList = arr
    nodeItem.value = obj
    showSetGroupRuleVisible.value = true
  }

  const saveSetGroupRule = (data: any) => {
    let groupMemberList = data.subNodeList.filter((e: any) => e.isGroup)
    selTaskType.value.node.forEach((item: any) => {
      if (item.contentType == data.contentType) {
        item.isSel = true
        item.isPick = false
        item.mulPrice = data.groupPrice
        // item.subNodeList = data.subNodeList
        item.childrenGroupMemberList = groupMemberList
      }
      let index = groupMemberList.findIndex((e: any) => e.contentType == item.contentType)
      if (index != -1) {
        item.groupLeaderContentType = data.contentType
        item.isSel = true
        item.mulPrice = '--'
      }
    })

    console.log(selTaskType.value.node)
  }

  const changeType = (code: string) => {
    selTaskType.value = _.cloneDeep(taskTypeAndNode.find((item) => item.value == code))
  }

  const init = () => {
    selTaskType.value = _.cloneDeep(taskTypeAndNode.find((item) => item.value == form.value.taskType))
  }
  onMounted(init)
</script>

<style lang="less" scoped></style>
